<template>
  <div class="bor">
    <A30></A30>
    <A29></A29>
    <h1>组合式API</h1>
    <h2>数字：{{ count }}</h2>
    <button @click="add" class="add">加+2</button>
    <button @click="sub" class="sub">减-2</button>
  </div>
</template>
<script setup>
import A30 from "./A30.vue";
import { ref, onMounted } from "vue";
const count = ref(0);
const add = () => {
  count.value += 2;
};
const sub = () => {
  count.value -= 2;
};
</script>

<style>
.bor {
  border: 1px solid red;
}
.add {
  background-color: red;
}
.sub {
  background-color: green;
}
</style>
